import { connect } from 'dva';
import React, { useEffect, useState } from 'react';
import config from '../../config';
import styles from './index.less';


const businessCooperation = props => {
  const { form, dispatch } = props;
  const [status, setStatus] = useState(false)
  const [advantageList, setAdvantageList] = useState([])
  const [directionList, setDirectionList] = useState([])
  const [page, setPage] = useState({})
  useEffect(() => {
    dispatch({
      type: 'Public/getContentList',
      payload: { categoryId: props.id }
    }).then((res) => {
      let _advantageList = []
      let _directionList = []
      res?.data?.rows?.forEach(i => {
        if (i.categoryId == '1601057276800217090') {
          _advantageList.push(i)
        }
        if (i.categoryId == '1601057365149036546') {
          _directionList.push(i)
        }
      }) || []
      setAdvantageList(_advantageList)
      setDirectionList(_directionList)
    })
    dispatch({
      type: 'Public/getCategoryGet',
      payload: { id: props.id }
    }).then((res) => {
      setPage(res?.data || [])
    })
  }, [])
  const banner = page?.categoryImg && JSON.parse(page?.categoryImg)
  return (
    <div className={styles.businessCooperation}>
      <div className={styles.banner}>
        <img src={config.targetUrl + banner?.[0]?.path} height="100%" width="100%"/>
      </div>
      <div className={styles.container}>
        <div className={styles.advantage}>
          <div className={styles.titleBox}>
            <div className={styles.title}> 项目优势 </div>
            <div className={styles.titleShadow}> ADVANTAGE </div>
          </div>
          <div className={styles.desc}> 颠覆传统建站为你的用户访问体验竭尽全力，强大酷炫的动效，全局适用不限组件多种风格任意挑选，精准设置实现你的创意 </div>
          <div className={styles.advantageList}>
            {advantageList.map(item => {
              const contentImg = item?.contentImg && JSON.parse(item?.contentImg)
              return (
                <div className={styles.advantageItem}>
                  <img src={config.targetUrl + contentImg?.[0]?.path} />
                  <div className={styles.itemTitle}>{item?.contentTitle} </div>
                  <div className={styles.itemDesc}>{item?.contentDescription} </div>
                </div>
              )
            })}
          </div>
        </div>
        <div className={styles.direction}>
          <div className={styles.titleBox}>
            <div className={styles.title}> 业务方向 </div>
            <div className={styles.titleShadow}> BUSINESS </div>
          </div>
          <div className={styles.desc}> 网站与传统网站的融合，内容既丰富详细，展示又直观形象 </div>
          <div className={styles.directionList}>
            {directionList.map(item => {
              const contentImg = item?.contentImg && JSON.parse(item?.contentImg)
              return (
                <div className={styles.directiontem}>
                  <img src={config.targetUrl + contentImg?.[0]?.path} />
                  <div className={styles.itemTitle}>{item?.contentTitle} </div>
                  <div className={styles.itemDesc}>{item?.contentDescription} </div>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </div >
  );
};

export default connect(({ }) => ({}))(businessCooperation);
